<template>
  <section id="home" v-loading="loading">
    <el-row class="bg-image">
      <div class="title">{{title}}</div>
      <div class="btn-box flex-box">
        <el-button v-for="(menu, index) in menuList"
                   :key="index"
                   @click="toSystem(menu)"
                   :class="{'disabled':menu.disabled, 'submenu-box':menu.submenuList && menu.submenuList.length}">
          <img :src="`images/${menu.image}`" class="menu-image">
          <div class="menu-name">{{menu.name}}</div>
        </el-button>
      </div>
    </el-row>

    <!--    dialog start   -->
    <el-dialog :visible.sync="dialogVisible">
      <el-button v-for="(menu, index) in submenuList"
                 :key="index"
                 @click="toSystem(menu)"
                 :class="{'disabled':menu.disabled, 'submenu-box':menu.submenuList && menu.submenuList.length}">
        <img :src="`images/${menu.image}`" class="menu-image">
        <div class="menu-name">{{menu.name}}</div>
      </el-button>
    </el-dialog>
    <!--    dialog end   -->
  </section>
</template>

<script>
import axios from 'axios'
import { getRoleListByToken } from "@/api/authApi";

export default {
  data() {
    return {
      loading: false,
      token:null,
      userData: {'userName':'481439','userId':'481439','userSecurityLevel':'4'},
      menuList: [],
      submenuList: [],
      imageList: [],
      title: '',
      dialogVisible: false,
    }
  },
  created() {
    // this.getMenuList();
    this.token = sessionStorage.getItem("token");
    this.getConfig()
  },
  mounted:function(){
    
  },
  methods: {
    getConfig() {
      this.loading = true
      axios
        .get(`${window.location.origin}/cetc10Auth.json`)
        .then((res) => {
          this.loading = false
          if (res.data && res.status === 200) {
            sessionStorage.setItem("auditManager", res.data.auditManager);
            sessionStorage.setItem("securityManager", res.data.securityManager);
            const auditUrl = res.data.auditUrl;
            const securityUrl = res.data.securityUrl

            getRoleListByToken({
              token: sessionStorage.getItem("token"),
              userId: JSON.parse(sessionStorage.getItem("userData")).userId
            })
              .then((res) => {
                this.roleList = res.data.data.map((item) => item.jsmc);
                // 用户角色是否包含审计、安全管理员
                let type = null;
                if (
                  this.roleList.includes(sessionStorage.getItem("auditManager")) ||
                  this.roleList.includes(sessionStorage.getItem("securityManager"))
                ) {
                  type = "all";
                  if (!this.roleList.includes(sessionStorage.getItem("auditManager"))) {
                    type = "security";
                  }

                  if (!this.roleList.includes(sessionStorage.getItem("securityManager"))) {
                    type = "audit";
                  }
                }

                if (type != null) {
                  window.location = type === 'security' ? securityUrl : auditUrl
                } else {
                  this.getMenuList()
                }
              })
              .catch(() => {
                this.loading = false
              });
          }
        })
        .catch(() => {
          this.loading = false
        });
    },
    getMenuList() {
      this.$axios.get('/config.json')
        .then(resp => {
          this.menuList = resp.data.menuList;
          this.title = resp.data.title;
          document.title = resp.data.title;
        })
    },
    toSystem(menu) {
      if (!menu.disabled) {
        if(menu.type === 1){
          window.open(menu.url+"&token="+this.token, '_blank')
        }else if(menu.type === 2){
          window.open(menu.url+"{}", '_blank')
        }else if (menu.submenuList && menu.submenuList.length) {
          this.dialogVisible = true;
          this.submenuList = menu.submenuList;
        }
      }
    },
    showDialog(menu) {
      if (menu.submenuList && menu.submenuList.length) {
        this.dialogVisible = true;
        this.submenuList = menu.submenuList;
      }
    },
  }
}
</script>

<style lang="scss">
@mixin btn-style {
  .el-button {
    width: 140px;
    padding: 10px;
    margin: 30px 20px 30px;
    background-color: transparent;
    border: none;

    &.disabled {
      background-color: rgba(200, 200, 200, 0.8);
      cursor: not-allowed;
    }

    &.submenu-box,
    &:hover:not(.disabled) {
      background-color: rgba(200, 200, 200, 0.3);
    }

    .menu-image {
      width: 80px;
    }

    .menu-name {
      width: 100%;
      font-size: 26px;
      background-color: #ccc;
      border-radius: 2px;
      margin: 5px 0 0;
      overflow: hidden;
      white-space: normal;
      text-overflow: ellipsis;
    }
  }
}

#home {
  height: 100%;

  .bg-image {
    height: calc(100% - 0px);
    background-image: url("../assets/images/bg-image.png");
    background-size: 100% 100%;

    .title {
      color: #fff;
      font-size: 60px;
      font-weight: 600;
    }
  }

  .btn-box {
    height: calc(100% - 110px);
    padding: 10px 0;
  }

  .flex-box {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
  }

  @include btn-style;

  .el-dialog {
    background-color: rgba(200, 200, 200, 0.7);
    border-radius: 8px;

    .el-dialog__header {
      .el-dialog__headerbtn {
        .el-dialog__close {
          color: #000;
        }
      }
    }

    .el-dialog__body {
      text-align: left;

      .el-button {
        margin: 0 20px 30px;
      }
    }
  }
}

.v-modal {
  opacity: 0.9;
}
</style>
